<template>
  <el-dialog :close-on-click-modal="false" title="Share"  :visible.sync="show" 
  class="warranty_dialog share_dialog "  :before-close="cancle" :lock-scroll="false">
    <div v-for="icon in iconLink" :key="icon.icon" class="share_div" >
      <a  @click="OpenConcat(icon)" class="svgIcon" :title="icon.word">
        <svg class="svgNormal" >
          <use :xlink:href="'#'+icon.icon"></use>
        </svg>
        <svg class="svgHover" >
          <use :xlink:href="'#'+icon.iconHover"></use>
        </svg>
      </a>
      <p>{{icon.p}}</p>
    </div>

  </el-dialog>
</template>

<script>
import { articleShareNumFunc } from '@/utils/kanban.js'
export default {
  data() {
    return {
      iconLink: [
        {icon:'icon-Facebook_normal', iconHover: 'icon-Facebook_hover', p:'Facebook',
          word:'Share on Facebook', url:'https://www.facebook.com/sharer/sharer.php?u='},
        {icon:'icon-Twitter_normal', iconHover: 'icon-Twitter_hover',  p:'Twitter',
          word:'Share on Twitter', url:'https://twitter.com/intent/tweet?text=' },
        {icon:'icon-Message_normal', iconHover: 'icon-Message_hover', p:'E-mail',
          word:'Share on Email', url:'mailto:?subject='},
        {icon:'icon-Link_normal', iconHover: 'icon-Link_hover', p:'copy link',
          word:'Copy Link to Clipboard', url:'copy'}
      ],
    }
  },
  props: {
    show: Boolean,
    closeDialog:Function,
  },

  methods: {
    cancle () {
      this.$emit('closeDialog')
    },
   OpenConcat (icon){
      let that = this
      let url = icon.url
      let location = window.location.href
      let isCopy = url.indexOf('copy') > -1
      let title = this.$parent.detail.title
      let share_way = ''
      if(url.indexOf('facebook') > -1){
        url += location + '&quote=' + title
        share_way = 'Facebook'
      } else if (url.indexOf('twitter') > -1){
        url+= title + '&url=' + location
         share_way = 'Twitter'
      } else if(url.indexOf('mailto') > -1) {
        url+= title + '&body=' + location
        share_way = 'Email'
      } else if (isCopy){
        url = location
        share_way = 'Link'
      }
      if(isCopy){
        this.$copyText(url).then(function () {
          that.$message.success('Link Copied')
        }, function () {
           that.$message.success('Link not copy')
        })
      }else {
        window.open(url)
      }

      articleShareNumFunc(share_way, this.$parent.detail.title,this.$parent.detail.id)
    },


  }
}
</script>

<style lang="scss">
@import '@/styles/explore/details.scss';

</style>